/**
 * Created by 123 on 2017/12/26.
 */
import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Button,
  ScrollView,
  TextInput
} from 'react-native'
import {List, Radio, InputItem,DatePicker,Flex,Checkbox} from 'antd-mobile';
const RadioItem = Radio.RadioItem;
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;
import Color from '../../assets/colors'
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
import moment from 'moment';
import HorizontalBody from './HorizontalBody'
import CropView from "../rectifyBill/CropView";
import Dialog from '../../routes/DialogTip'
const Item = List.Item;
// import CheckBox from 'react-native-checkbox'

export default class TaskForm extends React.Component {

  render() {
    const {projectList, nameList, currentProject, taskNum,thisSelect,thisSelectOppen,thisBeSelected,
        thisBeSelectedLabel,selectArrow,
      taskName,closingDate,dialogText,taskText,prjname,hasDone}=this.props;
    // const {setClosingDate,setTaskNum, setTaskName, setCurrentProject, setCurrentNameList, commit}=this.props;
    const {setClosingDate, setTaskName, setCurrentProject, setCurrentNameList, commit,
      setTaskText,changeText,search}=this.props;
    console.log('projectList ==',projectList)
    return (
      <View style={styles.baseV}>

        <View style={styles.BtnContainer}>
          <Text style={styles.btnText} onPress={hasDone?null:commit}>{hasDone?'提交中...':'提交'}</Text>
        </View>

        {/*任务名称*/}
        <View style={styles.baseH}>

          {/*<List style={styles.flexItem}>*/}
          {/*<InputItem*/}
          {/*placeholder="请输入任务编号"*/}
          {/*onChange={(val)=>setTaskNum(val)}*/}
          {/*value={taskNum}*/}
          {/*>任务编号</InputItem>*/}
          {/*</List>*/}

          <List style={styles.flexItem}>
            <InputItem
              placeholder="请输入任务名称"
              onChange={(val)=>setTaskName(val)}
              value={taskName}
            >任务名称</InputItem>
          </List>
        </View>

        {/*任务结束时间*/}
        <HorizontalBody name="任务截止时间">
          <View style={{flex:1,backgroundColor:Color.white}}>
            <DatePicker
              mode="date"
              title="选择日期"
              extra="选择日期"
              value={closingDate ===''?new Date():closingDate}
              onChange={date => setClosingDate(date)}
            >
              <List.Item arrow="horizontal" style={{height:50}}/>
            </DatePicker>
          </View>
        </HorizontalBody>


        {/*备注*/}
        <View style={styles.baseH}>
          <List style={styles.flexItem}>
            <InputItem
              placeholder="请输入备注内容"
              onChange={(val)=>setTaskText(val)}
              value={taskText}
            >备         注</InputItem>
          </List>
        </View>

        {/*搜索*/}
        <View style={styles.baseH}>
          <View style={{width:480,height:50,borderWidth:1,borderColor:Color.backgroundLightGray,
            borderBottomLeftRadius:5,borderTopLeftRadius:5,marginLeft:2}}>
            <TextInput underlineColorAndroid='transparent' style={{paddingRight:0}}
                        value={prjname}
                       placeholder={'请输入项目名称进行搜索...'}
                       onChangeText={(val) =>{changeText(val)}}
            />
          </View>
          <View style={styles.searchBt}>
            <Text style={{fontSize:20,color:'white'}} onPress={(prjname) =>{search(prjname)}}>搜索</Text>
          </View>
        </View>

          {/*<View style={{width:'50%'}}>*/}
              {/*<List renderHeader={() => '项目选择'} className="my-list">*/}
                  {/*<Item*/}
                      {/*arrow={selectArrow}*/}
                      {/*multipleLine*/}
                      {/*onClick={() => {thisSelect()}}*/}
                      {/*platform="android"*/}
                  {/*>*/}
                      {/*{thisBeSelectedLabel}*/}
                  {/*</Item>*/}
                  {/*{*/}
                      {/*thisSelectOppen?<ScrollView>*/}
                          {/*{*/}
                              {/*projectList.map(i =>(*/}
                                  {/*<Item*/}
                                      {/*style={{color:'red'}}*/}
                                      {/*multipleLine*/}
                                      {/*onClick={() =>{thisBeSelected(i)*/}
                                          {/*setCurrentProject(i.value)}}*/}
                                      {/*platform="android"*/}
                                  {/*>*/}
                                      {/*{i.label}*/}
                                  {/*</Item>*/}
                              {/*))*/}
                          {/*}*/}
                      {/*</ScrollView>:null*/}
                  {/*}*/}
              {/*</List>*/}
          {/*</View>*/}
          {/*<View style={{flexDirection:'row',marginTop:20}}>*/}
              {/*{nameList.map(i => (*/}
                  {/*<View style={{display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'center'}}>*/}
                      {/*<View style={{marginLeft:20}}>*/}
                          {/*<CheckBox*/}
                              {/*label=''*/}
                              {/*onChange={()=>{setCurrentNameList(i.value)}}*/}
                              {/*checked={i.isCheck}*/}
                          {/*/>*/}
                      {/*</View>*/}
                      {/*<Text style={{marginLeft:5}}>{i.label}</Text>*/}
                  {/*</View>*/}
              {/*))}*/}
          {/*</View>*/}

        <View style={styles.baseH}>
          <ScrollView style={{height: 500}}>
            <List style={[styles.flexItem]} renderHeader={() => '选择项目'}>
              {
                (projectList === undefined || projectList.length === 0)?
                  <View>
                    <Text style={{height:500,textAlign:'center',paddingTop:100}}>
                      加载项目列表中...
                    </Text>
                  </View>:
                  <View>
                    {projectList.map(i => (
                      <RadioItem key={i.value} checked={currentProject === i.value}
                                 onChange={() => setCurrentProject(i.value)}>
                        {i.label}
                      </RadioItem>
                    ))}
                  </View>
              }
            </List>
          </ScrollView>
          <View style={styles.lineV}/>
          <ScrollView style={{height: 500}}>
            <List style={styles.flexItem} renderHeader={() => '选择监督员'}>
              {nameList.map(i => (
                <CheckboxItem key={i.value} onChange={() => setCurrentNameList(i.value)}>
                  {i.label}
                </CheckboxItem>
              ))}
            </List>
          </ScrollView>
        </View>

        {
          dialogText === ''?null:
            <Dialog isShow={'true'} text={dialogText} />
        }

      </View>
    )
  }
}

const styles = StyleSheet.create({
  baseV: {
    display: 'flex',
    flexDirection: 'column',
    flex: 1,
    backgroundColor: Color.white,
  },
  baseH: {
    display: 'flex',
    flexDirection: 'row',
    backgroundColor: Color.white,
    // backgroundColor:'red'
  },
  flexItem: {
    flex: 1,
    backgroundColor: Color.white,
  },
  line: {
    backgroundColor: Color.backgroundLightGray,
    height: 1
  },
  lineV: {
    backgroundColor: Color.backgroundLightGray,
    width: 1
  },
  BtnLocal: {
    backgroundColor: Color.white,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 20,
    textAlign: 'center',
    width: '100'
  },
  BtnContainer: {
    marginTop: 10,
    marginBottom: 10,
    backgroundColor: Color.white,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
  },
  btnText: {
    color: '#fff',
    fontSize: 26,
    borderRadius: 10,
    textAlign: 'center',
    backgroundColor: Color.btnPrimaryBg,
  },
  searchBt:{
    alignItems:'center',
    backgroundColor:Color.backgroundLightGray,
    paddingTop:8,
    paddingBottom:8,
    // paddingLeft:5,
    borderBottomRightRadius:5,
    borderTopRightRadius:5,
    width:77
  },

});

{/**/}
{/*<Text style={{width:50,height:30,backgroundColor: Color.btnPrimaryBg,marginLeft:10,*/}
{/*fontSize:18,textAlign: 'center',marginTop:10,borderRadius:5,color:'white'}}>备注</Text>*/}

{/*<View style={{marginLeft:10,marginRight:10,marginTop:5,*/}
{/*height:100, borderWidth:1,borderColor:Color.btnPrimaryBg,borderTopRightRadius:5,borderBottomRightRadius:5,*/}
{/*borderBottomLeftRadius:5,borderTopLeftRadius:5*/}
{/*}}>*/}
{/*<TextInput underlineColorAndroid='transparent' style={{paddingRight:10,paddingLeft:10}}*/}
{/*// value={prjname}*/}
{/*placeholder={'请输入备注内容...'}*/}
{/*// onChangeText={(val) =>{changeText(val)}}*/}
{/*/>*/}
{/*</View>*/}

{/*/!**!/*/}